<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="监考活动名称" prop="active_name">
        <el-input v-model="form.active_name"></el-input>
      </el-form-item>
      <el-form-item label="发布部门">
        <el-select v-model="form.department_code" placeholder="请选择部门">
	          <el-option v-for="option in bmOptions" :key="option.value" :value="option.value" :label="option.label"></el-option>
	      </el-select>
      </el-form-item>
      <el-form-item label="报名开始时间" prop="signup_start_date">
        <el-col>
          <el-date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" v-model="form.signup_start_date" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="报名截止时间" prop="signup_end_date">
        <el-col>
          <el-date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" v-model="form.signup_end_date" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="考试开始时间" prop="exam_start_date">
        <el-col>
          <el-date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" v-model="form.exam_start_date" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="考试结束时间" prop="exam_end_date">
        <el-col>
          <el-date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间" v-model="form.exam_end_date" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="考务人员类型" prop="personnel_type">
        <el-radio-group v-model="form.personnel_type">
          <el-radio label="监考"></el-radio>
          <el-radio label="巡考"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="校外教师" prop="canOffCampusSignup">
        <el-switch v-model="form.canOffCampusSignup" active-text="可报名" inactive-text="不能报名">
        </el-switch>
      </el-form-item>
      <el-form-item label="需求人数" prop="numOfPeaple">
        <el-input v-model="form.numOfPeaple"></el-input>
      </el-form-item>
      <el-form-item label="费用标准" prop="examinationFee">
        <el-input v-model="form.examinationFee"></el-input>
      </el-form-item>
      <el-form-item label="性别要求" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio :label="0">全部</el-radio>
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄上限" prop="age">
        <el-input v-model="form.age" placeholder="报考教师年龄上限"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-demo"
          drag
          action="string"
          :http-request="uploadFiles"
          :before-upload="beforeUpload"
          :on-remove="handleRemove"
          multiple>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip">上传考务相关文档(考务纪律、考务培训教程、安全责任书等)</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">发布监考活动</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { insertExaminationActive } from '@/api/activePublish'
import { mapGetters } from 'vuex'
import { parseTime } from '@/utils'
import axios from 'axios'
export default {
  name: 'publishActive',
  data() {
    return {
      form: {
        active_name: '',
        signup_start_date: '',
        signup_end_date: '',
        exam_start_date: '',
        exam_end_date: '',
        personnel_type: '',
        remark: '',
        department_code: '',
        numOfPeaple: '',
        examinationFee: '',
        canOffCampusSignup: true,
        gender: '',
        age: ''
      },
      fileList: [],
      files: '',
      rules: {
        active_name: [{ required: true, message: '请输入监考活动名称', trigger: 'blur' }],
        signup_start_date: [{ required: true, message: '请输入报名开始时间', trigger: 'blur' }],
        signup_end_date: [{ required: true, message: '请输入报名结束时间', trigger: 'blur' }],
        exam_start_date: [{ required: true, message: '请输入考试开始时间', trigger: 'blur' }],
        exam_end_date: [{ required: true, message: '请输入考试结束时间', trigger: 'blur' }],
        numOfPeaple: [{ required: true, message: '请输入需求人数', trigger: 'blur' }],
        examinationFee: [{ required: true, message: '请输入监考费用标准', trigger: 'blur' }],
        personnel_type: [{ required: true, message: '请选择考务人员类型', trigger: 'blur' }],
        canOffCampusSignup: [{ required: true, message: '请确定校外教师能否报名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别要求', trigger: 'blur' }]
      },
      loading: false,
      bmOptions: [{ value: '101', label: '会计学院' },
        { value: '102', label: '金融学院' },
        { value: '104', label: '经济学院' },
        { value: '105', label: '法学院' },
        { value: '106', label: '公共经济与管理学院' },
        { value: '107', label: '人文学院' },
        { value: '108', label: '信息管理与工程学院' },
        { value: '109', label: '外国语学院' },
        { value: '110', label: '统计与管理学院' },
        { value: '111', label: '数学学院' },
        { value: '112', label: '体育教育部' },
        { value: '113', label: '继续教育学院' },
        { value: '115', label: '国际文化交流学院' },
        { value: '123', label: '国际教育学院' },
        { value: '125', label: '马克思主义学院' },
        { value: '126', label: '创业学院' },
        { value: '127', label: '商学院' },
        { value: '211', label: '研究室' },
        { value: '213', label: '国际处' },
        { value: '214', label: '教务处' },
        { value: '215', label: '学生处' },
        { value: '216', label: '研究生院' },
        { value: '217', label: '科研处' },
        { value: '219', label: '信息化办公室' },
        { value: '228', label: '团委' },
        { value: '231', label: '现代服务产业园区办公室' },
        { value: '302', label: '高等研究院' },
        { value: '321', label: '公共政策与治理研究院' },
        { value: '341', label: '财经研究所' },
        { value: '353', label: '高等教育研究所' },
        { value: '358', label: '上海市金融信息技术研究重点实验室' },
        { value: '359', label: '中国公共财政研究院' },
        { value: '361', label: '上海发展研究院' },
        { value: '368', label: '三农研究院' },
        { value: '404', label: '就业指导中心' },
        { value: '409', label: '实验中心' }]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles',
      'userId',
      'roleId'
    ])
  },
  methods: {
    uploadFiles(item) {
      console.log(item)
      console.log(this.fileList)
      const fileName = item.file.name.split('.')[0]
      const fileExtension = item.file.name.split('.')[1]
      const fileUid = item.file.uid
      this.fileList.push(fileName + '_' + fileUid + '.' + fileExtension)
      const formData = new FormData()
      formData.append('file', item.file)
      formData.append('uid', item.file.uid)
      axios.post('/api/upload/examinationActiveFiles', formData).then(response => {
        // console.log(response.data)
        this.$message.success(response.data.message)
      }).catch(error => {
        console.log(error)
        this.$message.error('文件上传失败')
      })
    },
    handleRemove(file, fileList) {
      this.fileList = []
      if (fileList.length > 0) {
        for (let i = 0; i < fileList.length; i++) {
          const fileName = fileList[i].name.split('.')[0]
          const fileExtension = fileList[i].name.split('.')[1]
          const fileUid = fileList[i].uid
          this.fileList.push(fileName + '_' + fileUid + '.' + fileExtension)
        }
      }
    },
    beforeUpload(file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension1 = file.name.split('.')[1] === 'pdf'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const extension3 = file.name.split('.')[1] === 'doc'
      const extension4 = file.name.split('.')[1] === 'docx'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension1 && !extension2 && !extension3 && !extension4) {
        // console.log('上传模板只能是 xls、xlsx、doc、docx 格式!')
        this.$message.error('上传模板只能是 excel,word,pdf 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 10MB!')
        // console.log('上传模板大小不能超过 10MB!')
      }
      return extension || extension1 || extension2 || extension3 || extension4 && isLt2M
    },
    onSubmit(formName) {
      // console.log(this.$refs)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const that = this
          const curTime = new Date()
          if (that.form.signup_start_date >= that.form.signup_end_date) {
            this.$message.error('报名开始时间应在报名结束时间之前')
            return
          }
          if (that.form.exam_start_date >= that.form.exam_end_date) {
            this.$message.error('考试开始时间应在考试结束时间之前')
            return
          }
          if (that.form.signup_end_date >= that.form.exam_start_date) {
            this.$message.error('报名时间应该考试开始时间之前')
            return
          }
          if (!(/(^[0-9]*[1-9][0-9]*$)/.test(that.form.numOfPeaple))) {
            // that.$message.error(that.form.numOfPeaple)
            this.$message.error('需求人数必须为整数')
            return
          }
          if (!(/(^[0-9]*[1-9][0-9]*$)/.test(that.form.age))) {
            // that.$message.error(that.form.numOfPeaple)
            this.$message.error('年龄上限必须为整数')
            return
          }
          that.loading = true
          that.files = ''
          if (that.fileList.length > 0) {
            for (let i = 0; i < that.fileList.length; i++) {
              that.files += that.fileList[i] + ','
            }
            that.files = (that.files.substring(that.files.length - 1) === ',') ? that.files.substring(0, that.files.length - 1) : that.files
          }
          const param = {
            'activeName': that.form.active_name,
            'signupStartTime': parseTime(that.form.signup_start_date),
            'signupEndTime': parseTime(that.form.signup_end_date),
            'examStartTime': parseTime(that.form.exam_start_date),
            'examEndTime': parseTime(that.form.exam_end_date),
            'createUserId': that.name,
            'createRoleId': that.roleId,
            'personnelTypeName': that.form.personnel_type,
            'numOfPeaple': that.form.numOfPeaple,
            'departmentCode': that.form.department_code,
            'remark': that.form.remark,
            'canOffCampusSignup': that.form.canOffCampusSignup,
            'examinationFee': that.form.examinationFee,
            'status': '1',
            'publishTime': parseTime(curTime.toString()),
            'filePath': that.files,
            'gender': that.form.gender,
            'age': that.form.age
          }
          insertExaminationActive(param.activeName, param.departmentCode, param.signupStartTime, param.signupEndTime,
            param.examStartTime, param.examEndTime, param.createUserId, param.createRoleId, param.personnelTypeName, param.numOfPeaple,
            param.examinationFee, param.remark, param.canOffCampusSignup, param.status, param.publishTime, param.filePath,
            param.gender, param.age).then(response => {
            if (response.exception) {
              that.processing = false
              that.$message.error(response.exception.message)
              return
            }
            that.loading = false
          }).catch(error => {
            that.loading = false
            that.files = ''
            console.log(error)
            that.$message.error('发布活动失败，请联系管理员')
          })
        } else {
          console.log('error')
        }
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

